﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="OnLineExam.Web.mobile.test" %>


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>layui</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link href="../assets/swiper/4.2.0/css/swiper.min.css" rel="stylesheet" />
	<style>
		html, body {
			position: relative;
			height: 100%;
		}

		body {
			background: #eee;
			font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
			font-size: 14px;
			color: #000;
			margin: 0;
			padding: 0;
		}

		.swiper-container {
			width: 100%;
			height: 100%;
		}

		.swiper-slide {
			text-align: center;
			font-size: 18px;
			background: #fff;
			/* Center slide text vertically */
			display: -webkit-box;
			display: -ms-flexbox;
			display: -webkit-flex;
			display: flex;
			-webkit-box-pack: center;
			-ms-flex-pack: center;
			-webkit-justify-content: center;
			justify-content: center;
			-webkit-box-align: center;
			-ms-flex-align: center;
			-webkit-align-items: center;
			align-items: center;
		}
	</style>
	<script src="../Scripts/jquery-1.7.1.min.js"></script>
	<link href="../assets/layui/2.2.5/css/layui.css" rel="stylesheet" />
	<script src="../assets/layui/2.2.5/layui.all.js"></script>
</head>
<body>
	<blockquote class="layui-elem-quote">
		考试试题：<<<span id="paperTitle"></span>>> 考试时间:<span id="spTimeOutShow" style="color: Red">剩余<font id="f_hh"></font>小时<font id="f_mm"></font>分<font id="f_ss"></font>秒</span>
	</blockquote>

	<div class="layui-collapse">
		<div class="layui-colla-item">
			<h2 class="layui-colla-title">杜甫</h2>
			<div class="layui-colla-content layui-show">
				<div class="swiper-container">
					<div class="swiper-wrapper" id="ppp">
					</div>
					<!-- Add Pagination -->
					<div class="swiper-pagination"></div>
					<!-- Add Arrows -->
					<div class="swiper-button-next"></div>
					<div class="swiper-button-prev"></div>
				</div>

			</div>
		</div>
	</div>



	<!-- Swiper JS -->
	<script src="../assets/swiper/4.2.0/js/swiper.min.js"></script>
	<script src="../assets/jsrender.js"></script>
	<script>//倒计时


	</script>
	<!-- Initialize Swiper -->
	<script>
		var paperId = '<%=Request.QueryString["id"]%>';
		function SetSwiper() {
			var swiper = new Swiper('.swiper-container', {
				pagination: {
					el: '.swiper-pagination',
					type: 'fraction',
				},
				navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				},
			});
		}
  </script>

	<script id="sTmpl" type="text/x-jsrender">
		{{for items}}
		<div class="swiper-slide">
			<ul>
				<li>{{:Title}} 
				</li>
				<li>
					<input type="radio" id="A{{:ID}}" name="{{:ID}}" data-json="{{:ID}}" data-option="A" /><label for="A{{:ID}}">{{:AnswerA}}</label>
				</li>
				<li>
					<input type="radio" id="B{{:ID}}" name="{{:ID}}" data-id="{{:ID}}" data-option="B" /><label for="B{{:ID}}">{{:AnswerB}}</label>
				</li>
				<li>
					<input type="radio" id="C{{:ID}}" name="{{:ID}}" data-id="{{:ID}}" data-option="C" /><label for="C{{:ID}}">{{:AnswerC}}</label>
				</li>
				<li>
					<input type="radio" id="D{{:ID}}" name="{{:ID}}" data-id="{{:ID}}" data-option="D" /><label for="D{{:ID}}">{{:AnswerD}}</label>
				</li>
			</ul>
		</div>
		{{/for}}
	</script>
	<script id="mTmpl" type="text/x-jsrender">
		{{for items}}
		<div class="swiper-slide">
			<ul>
				<li>{{:Title}} 
				</li>
				<li>
					<input type="radio" id="A{{:ID}}" name="{{:ID}}" data-json="{{:ID}}" data-option="A" /><label for="A{{:ID}}">{{:AnswerA}}</label>
				</li>
				<li>
					<input type="radio" id="B{{:ID}}" name="{{:ID}}" data-id="{{:ID}}" data-option="B" /><label for="B{{:ID}}">{{:AnswerB}}</label>
				</li>
				<li>
					<input type="radio" id="C{{:ID}}" name="{{:ID}}" data-id="{{:ID}}" data-option="C" /><label for="C{{:ID}}">{{:AnswerC}}</label>
				</li>
				<li>
					<input type="radio" id="D{{:ID}}" name="{{:ID}}" data-id="{{:ID}}" data-option="D" /><label for="D{{:ID}}">{{:AnswerD}}</label>
				</li>
				<li>
					<input type="radio" id="E{{:ID}}" name="{{:ID}}" data-id="{{:ID}}" data-option="E" /><label for="D{{:ID}}">{{:AnswerE}}</label>
				</li>
				<li>
					<input type="radio" id="F{{:ID}}" name="{{:ID}}" data-id="{{:ID}}" data-option="F" /><label for="D{{:ID}}">{{:AnswerF}}</label>
				</li>
				<li>
					<input type="radio" id="G{{:ID}}" name="{{:ID}}" data-id="{{:ID}}" data-option="G" /><label for="G{{:ID}}">{{:AnswerG}}</label>
				</li>
			</ul>
		</div>
		{{/for}}
	</script>
	<script src="../assets/timerHelper.js"></script>
	<script>

		$(function () {
			$.getJSON('../api/PaperHandler.ashx?id=' + paperId, function (data) {
				$('title').text(data.PaperModel.PaperName);

				$('#paperTitle').text(data.PaperModel.PaperName);

				//倒计时
				timerHelper.setOnTimeRuning("#f_hh", "#f_mm", "#f_ss");
				timerHelper.setOnTimeEnd(function () {
					//alert("dd");
				}
				);
				timerHelper.start(data.PaperModel.ExamTime);


				creater("#sTmpl", data.SingleProblemModels);

				creater("#mTmpl", data.MultiProblemModels);

				creater("#jTmpl", data.JudgeProblemModels);

				creater("#fTmpl", data.FillBlankProblemModels);

				creater("#qTmpl", data.QuestionProblemModels);



				SetSwiper();

			});

		});

		function creater(tmpl, data) {
			var tmpl = $.templates(tmpl);
			var sData = { items: data };
			var html = tmpl.render(sData);
			var allHtml = $('#ppp').html() + html;
			$('#ppp').html(allHtml);
		}
	</script>
</body>
</html>
